<template>
  <div>
    <h1>可编辑路径地图</h1>
    <button @click="toggleEditing">{{ isEditing ? '停止编辑' : '开始编辑' }}</button>
    <button @click="clearPath">清除路径</button>
    <button @click="showCurrentPath">显示当前路径</button>
    <button @click="focusLine">聚焦路径</button>
    <button @click="turnDir">方向反转</button>
    <button @click="toggleArrow">{{ isShowArrow? '隐藏箭头' : '显示箭头'}}</button>
    
    <EditablePath 
      ref="editablePath" 
      :initial-path="initialPath"
      @path-updated="handlePathUpdate"
    />
    
    <div v-if="currentPath.length > 0">
      <h3>当前路径坐标:</h3>
      <pre>{{ currentPath }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import EditablePath from './EditablePath.vue';

const editablePath = ref(null);
const isEditing = ref(true);
const isShowArrow = ref(false);
const currentPath = ref([]);

// 初始路径数据
const initialPath = [];

const toggleEditing = () => {
  isEditing.value = !isEditing.value;
  editablePath.value.toggleEditing(isEditing.value);
};

const clearPath = () => {
  editablePath.value.updatePath([]);
};

const focusLine = () => {
  editablePath.value.focusLine();
};

const turnDir = () => {
  editablePath.value.turnDir();
};
const toggleArrow = () => {
  isShowArrow.value = !isShowArrow.value;
  editablePath.value.toggleArrow(isShowArrow.value);
};

const showCurrentPath = () => {
  currentPath.value = editablePath.value.getCurrentPath();
};

const handlePathUpdate = (newPath) => {
  currentPath.value = newPath;
  console.log('路径已更新:', newPath);
};
</script>
